☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Event Handling

Course- AngularJS >

When creating more advanced AngularJS applications, sooner or later your application will need to handle DOM events like mouse clicks, moves, keyboard presses, change events etc. AngularJS has a simple model for how to add event listeners to the HTML you generate from your views. This text will explain this model.

Before we dive into the event stuff let me just show you a simple AngularJS application which we will use as base for the examples shown in this text:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myapp">

  <div ng-controller="MyController" >
  </div>

  <script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
            } );
  </script>

</body>
</html>

AngularJS Event Listener Directives

You attach an event listener to an HTML element using one of the AngularJS event listener directives:

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

AngularJS Event Listener Examples

Here is a simple AngularJS event listener directive example:

<div ng-controller="MyController" >
    <div ng-click="myData.doClick()">Click here</div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function() {
                    alert("clicked");
                }
            } );
</script>

When you click the inner div of the above example, the myData.doClick() function will get called. As you can see in the controller function, the myData object has a doClick() function added to it.

As you can see, attaching events to HTML DOM elements is not much different from generating the HTML in the first place. The event listener functions called are functions added to the $scope object by the controller function.

The event listener directives have a special variable named $event which you can use as parameter to the event listener function. The $event variable contains the original browser event object. Here is an example:

<div ng-controller="MyController" >
    <div ng-click="myData.doClick($event)">Click here</div>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.doClick = function(event) {
                    alert("clicked: " + event.clientX + ", " + event.clientY);
                }
            } );
</script>

You can also pass other parameters to your event listener functions. Here is an example that adds event listener function to a list of li elements:

<div ng-controller="MyController" >
    <ul>
        <li ng-repeat="item in myData.items"
               ng-click="myData.doClick(item, $event)">Click here</li>
    </ul>
</div>

<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myData = {};
                $scope.myData.items = [{ v: "1"}, { v: "2"}, { v : "3"} ];

                $scope.myData.doClick = function(item, event) {
                    alert("clicked: " + item.v + " @ " + event.clientX + ": " + event.clientY);
                }


            } );
</script>

This example iterates through a list of items, generates li elements from them, and adds click listeners to each li element. Along with the call to the click listener is passed the item JavaScript object the li element was generated based on, along with the click event object ($event).

PRV MENU NEXT